<template>
  <div class="container">
    <div class="page-title">当日车流量</div>
    <div class="statistics">
      <div class="item">
        <div class="img-wrap">
          <img src="@/assets/statistics/d1.png" alt="">
        </div>
        <div class="item-left">
          <div class="item-left-title">当日车流量</div>
          <div class="count">
            <span class="num">1563</span>
            <span class="unit">辆</span>
          </div>
        </div>
      </div>
      <div class="split"/>
      <div class="item">
        <div class="img-wrap">
          <img src="@/assets/statistics/d2.png" alt="">
        </div>
        <div class="item-left">
          <div class="item-left-title">用户总数</div>
          <div class="count">
            <span class="num">1563</span>
            <span class="unit">辆</span>
          </div>
        </div>
      </div>
      <div class="split"/>
      <div class="item">
        <div class="img-wrap">
          <img src="@/assets/statistics/d3.png" alt="">
        </div>
        <div class="item-left">
          <div class="item-left-title">总车位数</div>
          <div class="count">
            <span class="num">1563</span>
            <span class="unit">辆</span>
          </div>
        </div>
      </div>
      <div class="split"/>
      <div class="item">
        <div class="img-wrap">
          <img src="@/assets/statistics/d4.png" alt="">
        </div>
        <div class="item-left">
          <div class="item-left-title">已停车位</div>
          <div class="count">
            <span class="num">1563</span>
            <span class="unit">辆</span>
          </div>
        </div>
      </div>
      <div class="split"/>
      <div class="item">
        <div class="img-wrap">
          <img src="@/assets/statistics/d5.png" alt="">
        </div>
        <div class="item-left">
          <div class="item-left-title">剩余车位</div>
          <div class="count">
            <span class="num">15</span>
            <span class="unit">辆</span>
          </div>
        </div>
      </div>
    </div>
    <div class="panel">
      <div class="panel-left">
        <div class="common-title">
          近30天车流量
        </div>
        <div id="chart-line" class="chart-line"/>
      </div>
      <div class="panel-right">
        <div class="common-title">
          车辆流量排行榜
        </div>
        <div class="list">
          <div class="list-item">
            <div class="icon icon1"/>
            <div class="park-name">车场名称</div>
            <div class="bar">
              <div class="inner-bar"/>
            </div>
            <div class="rate">100%</div>
            <div>950辆</div>
          </div>
          <div class="list-item">
            <div class="icon icon2"/>
            <div class="park-name">车场名称</div>
            <div class="bar">
              <div class="inner-bar"/>
            </div>
            <div class="rate">100%</div>
            <div>950辆</div>
          </div>
          <div class="list-item">
            <div class="icon icon3"/>
            <div class="park-name">车场名称</div>
            <div class="bar">
              <div class="inner-bar"/>
            </div>
            <div class="rate">100%</div>
            <div>950辆</div>
          </div>
          <div v-for="i in 4" :key="i" class="list-item">
            <div class="icon">{{ i+4 }}</div>
            <div class="park-name">车场名称</div>
            <div class="bar">
              <div class="inner-bar"/>
            </div>
            <div class="rate">100%</div>
            <div>950辆</div>
          </div>
        </div>
      </div>
    </div>
    <div class="box">
      <div class="box-left">
        <div class="common-title">
          预警模块
        </div>
        <div class="table-wrap">
          <el-table
            ref="forewarning"
            :data="tableData"
            stripe
            height="100%"
            style="width: 100%"
            @cell-mouse-leave="forewarningStop=false"
            @cell-mouse-enter="forewarningStop=true">
            <el-table-column
              align="center"
              prop="date"
              label="车场名称"/>
            <el-table-column
              align="center"
              prop="name"
              label="车牌号码"/>
            <el-table-column
              align="center"
              prop="address"
              label="入场时间"/>
            <el-table-column
              align="center"
              prop="address"
              label="停车时长"/>
            <el-table-column
              align="center"
              prop="address"
              label="管理员"/>
          </el-table>
        </div>
      </div>
      <div class="box-right">
        <div class="common-title">
          当日车辆进出类型
        </div>
        <div class="table-wrap">
          <el-table
            ref="vehicleAccess"
            :data="tableData"
            stripe
            height="100%"
            style="width: 100%"
            @cell-mouse-leave="vehicleAccessStop=false"
            @cell-mouse-enter="vehicleAccessStop=true">
            <el-table-column
              align="center"
              prop="date"
              label="设备名称"/>
            <el-table-column
              align="center"
              prop="name"
              label="状态">
              <template slot-scope="{ row}">
                <i v-if="Math.random()>0.5" class="el-icon-success" style="color: #0CF910;"/>
                <i v-else class="el-icon-warning" style="color: #ff0000;"/>
              </template>
            </el-table-column>
        </el-table></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      radio: 1,
      listQuery: {},
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      tableData: [{
        date: '2016-05-02',
        name: '王小虎1111111111',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      },
      {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      },
      {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      forewarningStop: false,
      vehicleAccessStop: false,
      forewarningTimer: null,
      vehicleAccessTimer: null
    }
  },
  mounted() {
    this.initLineChart()
    this.forewarningTimer = this.scrollTable(this.$refs.forewarning, 'forewarningStop')
    this.vehicleAccessTimer = this.scrollTable(this.$refs.vehicleAccess, 'vehicleAccessStop')
  },
  beforeDestroy() {
    clearInterval(this.forewarningTimer)
    clearInterval(this.vehicleAccessTimer)
    this.forewarningTimer = null
    this.vehicleAccessTimer = null
  },
  methods: {
    scrollTable(dom, flag, speed = 30) {
      // 拿到表格挂载后的真实DOM
      const table = dom
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper
      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
      return setInterval(() => {
        if (this[flag]) {
          return false
        }
        // 元素自增距离顶部1像素
        divData.scrollTop += 1
        // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
        if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
        // 重置table距离顶部距离
          divData.scrollTop = 0
        }
      }, speed) // 滚动速度
    },
    initLineChart() {
      const chartDom = document.getElementById('chart-line')
      const myChart = this.$echarts.init(chartDom)
      const option = {
        grid: {
          left: '2.5%',
          right: '2.5%'
        },
        xAxis: {
          type: 'category',
          data: ['06/20', '06/21', '06/22', '06/23', '06/24', '06/25', '06/26']
        },
        yAxis: {
          type: 'value'
        },
        // 鼠标悬浮弹窗样式
        tooltip: {
          trigger: 'axis',
          textStyle: {
            // color: '#171725'
          },
          formatter: '{b}<br />{a}： {c} 辆'
        },
        series: [
          {
            name: '车流量',
            type: 'line',
            smooth: true, // 设置平滑曲线
            symbolSize: 0, // 设置折点大小
            itemStyle: {
              color: '#0075FF',
              shadowColor: '#0075FF',
              shadowBlur: 30
            },
            lineStyle: {
              shadowColor: '#0075FF',
              shadowBlur: 8,
              width: 3
            },

            data: [220, 182, 191, 234, 290, 330, 310]
          }
        ]
      }

      option && myChart.setOption(option)
    }
  }
}
</script>
<style lang="scss" scoped>
.container{
  background: #F5F7FA;
  min-height: calc(100vh - 84px);
  padding: 20px;
  box-sizing: border-box;
  .page-title{
    font-size: 24px;
    font-weight: 700;
    color: #3D3D3D;
  }
  .statistics{
    padding: 42px 44px 34px;
    background: #fff;
    border-radius: 14px 14px 14px 14px;
    margin: 20px 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .item{
      display: flex;
      align-items: center;
      .img-wrap{
        width: 70px;
        height: 70px;
        margin-right: 20px;
        img{
          display: block;
          width: 100%;
          height: 100%;
        }
      }
      .item-left-title{
        opacity: .6;
        font-size: 18px;
        margin-bottom: 8px;
      }
      .count{
        .num{
          font-size: 24px;
        }
        .unit{
          font-size: 18px;
        }
      }
    }
    .split{
      width: 1px;
      height: 59px;
      background-color: #D8D8D8;
    }
  }
  .tool{
    display: flex;
    .form-inline{
      margin-left: 25px;
    }
  }
  .common-title{
      border-left: 8px solid #3383FE;
      padding-left: 13px;
      font-size: 24px;
      font-weight: 400;
      color: #3D3D3D;
    }
  .panel{
    display: flex;
    .panel-left{
      flex: 1;
      background-color: #fff;
      margin-right: 18px;
      border-radius: 21px 21px 21px 21px;
      padding: 15px;
      .chart-line{
        height: 100%;
      }
    }
    .panel-right{
      padding: 15px;
      width: 446px;
      background-color: #fff;
      border-radius: 21px 21px 21px 21px;
      .list{
        margin-top: 35px;
        .list-item{
          display: flex;
          align-items: center;
          line-height: 1;
          margin-top: 20px;
          .icon{
            width: 21px;
            height: 17px;
            background: url('../../assets/statistics/r.png') 0 0 no-repeat;
            color: #fff;
            text-align: center;
            font-size: 13px;
            line-height: 1.2;
          }
          .icon1{
            background: url('../../assets/statistics/r1.png') 0 0 no-repeat;
          }
          .icon2{
            background: url('../../assets/statistics/r2.png') 0 0 no-repeat;
          }
          .icon3{
            background: url('../../assets/statistics/r3.png') 0 0 no-repeat;
          }
          .park-name{
            width: 130px;
            margin-left: 10px;
          }
          .bar{
            width: 134px;
            height: 13px;
            background: #F4F4F4;
            border-radius: 78px 78px 78px 78px;
            margin: 0 10px;
            .inner-bar{
              width: 40%;
              height: 100%;
              background: linear-gradient(270deg, #628EFA 0%, #285EE5 100%);
              border-radius: 78px 78px 78px 78px;
            }
          }
          .rate{
            width: 42px;
            margin-right: 10px;
          }
        }
      }
    }
  }
  .box{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    .table-wrap{
      margin: 15px -15px 0;
      height: 404px;
    }
    .box-left{
      flex: 1;
      height: 459px;
      background: #FFFFFF;
      border-radius: 21px 21px 21px 21px;
      margin-right: 18px;
      padding: 15px;
      box-sizing: border-box;
      .chart-bar{
        height: 100%;
      }
    }
    .box-right{
      width: 446px;
      height: 459px;
      background: #FFFFFF;
      border-radius: 10px 10px 10px 10px;
      padding: 15px;
      box-sizing: border-box;
      .chart-pie{
        height: 100%;
      }
    }
  }
}
</style>
